<template>
	<view class="padding-com text-df">
		<view class="margin-top-sm " v-for="(record,index) in detail_list" :key="index" @click="to_detail(record.id)">
			<view class="flex-row-bt">
				<view class="flex-row">
					<image :src="imgURL+record.indexImg" style="width: 80rpx; height: 80rpx; border-radius: 50%;">
					</image>
					<view class="flex-column-sb margin-left-xs">
						<view>{{record.productName}}</view>
						<view class="text-low text-sm margin-top-xs">{{record.createTime}}</view>
					</view>
				</view>
				<view class="theme-color">-{{record.totalPrice}}</view>
			</view>
			<divider :isLine="true" marginTop="10rpx"></divider>
		</view>

		<!-- 分割线 -->
		<divider marginTop="40px" marginBottom="40px"></divider>

	</view>

	<!-- 接口请求加载动画 -->
	<loading></loading>
</template>

<script setup lang="ts">
	import { onLoad, onReachBottom } from "@dcloudio/uni-app"
	import { reactive, ref } from 'vue';
	import { getExchange } from "../../api/point/point";
	import store from "../../store/login";
	import { imgURL } from '../../api/request';

	const detail_list = ref([{
		"id": "1",
		"productName": "九阳豆浆机",
		"monovalent": null,
		"productNumber": 2,
		"totalPrice": "1000",
		"userId": null,
		"color": null,
		"size": null,
		"specifications": null,
		"timeSlot": null,
		"timeInterval": null,
		"exchangeStatus": null,
		"createTime": "2024-03-28 16:52",
		"indexImg": "/profile/product/2024/03/28/91dc7a52-8077-44e1-a46e-f33be984c762_20240328142343A002.jpg"
	}])

	const param = reactive({
		current: 1,
		size: 10
	})

	onLoad(() => {
		if (store.state.token != '') {
			getExchange(param).then((res : any) => {
				detail_list.value = res.data.list
			})
		}
	})

	//触底刷新
	onReachBottom(() => {
		param.current++
		getExchange(param).then((res : any) => {
			for (let i = 0; i < res.data.list.length; i++) {
				detail_list.value.push(res.data.list[i])
			}
		})
	})

	const to_detail = (id : string) => {
		uni.navigateTo({
			url: '/pages/mines/my_exchange/detail?id=' + id
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>